<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Google Maps Demo</title>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=0"/>
<!--    <link href="http://fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet" type="text/css">-->
    <!-- 引入 Google Maps JavaScript API -->
<!--    <script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>-->
<!--    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCO_aRinQbO9DZXyCje6dyRvxAmvq-82eo"></script>-->
    <script
            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCO_aRinQbO9DZXyCje6dyRvxAmvq-82eo"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        input, select, button {
            outline: none;
            padding: 5px 5px;
            border: 1px solid #666;
            border-radius: 3px;
        }

        /* 设置地图容器的样式 */
        #map {
            height: 400px;
            width: 100%;
        }

        .routerPlan {
            padding-top: 10px;
            margin-bottom: 10px;
        }

        #content {
            margin-top: 20px;
            margin-left: 20px;
            min-width: 500px;
            max-width: 800px;
            min-height: 50px;
            border: 1px solid #666;
        }
    </style>
</head>
<body>
<div id="map"></div>
<div class="routerPlan">
    <span>路线规划</span>
    <select id="start">
        <option value="chicago, il">Chicago</option>
        <option value="st louis, mo">St Louis</option>
        <option value="joplin, mo">Joplin, MO</option>
        <option value="oklahoma city, ok">Oklahoma City</option>
        <option value="amarillo, tx">Amarillo</option>
        <option value="gallup, nm">Gallup, NM</option>
        <option value="flagstaff, az">Flagstaff, AZ</option>
        <option value="winona, az">Winona</option>
        <option value="kingman, az">Kingman</option>
        <option value="barstow, ca">Barstow</option>
        <option value="san bernardino, ca">San Bernardino</option>
        <option value="los angeles, ca">Los Angeles</option>
        <option value="昆明">昆明</option>
    </select>--
    <select id="end">
        <option value="chicago, il">Chicago</option>
        <option value="st louis, mo">St Louis</option>
        <option value="joplin, mo">Joplin, MO</option>
        <option value="oklahoma city, ok">Oklahoma City</option>
        <option value="amarillo, tx">Amarillo</option>
        <option value="gallup, nm">Gallup, NM</option>
        <option value="flagstaff, az">Flagstaff, AZ</option>
        <option value="winona, az">Winona</option>
        <option value="kingman, az">Kingman</option>
        <option value="barstow, ca">Barstow</option>
        <option value="san bernardino, ca">San Bernardino</option>
        <option value="los angeles, ca">Los Angeles</option>
        <option value="曲靖">曲靖</option>
    </select>
</div>
<div class="routerPlan">
    <span>位置检索</span>
    <input id="place" type="text" placeholder="请输入起点">
    <button id="serachBtn">检索</button>
    <button id="clear">清除</button>
    <div id="content"/>
</div>
<script>
	let geocoder, map, marker

	// 初始化地图函数
	function initMap() {
		//行车路线实例
		const directionsService = new google.maps.DirectionsService();
		const directionsRenderer = new google.maps.DirectionsRenderer();
		//检索实例
		geocoder = new google.maps.Geocoder();
		//  创建地图实例，指定地图容器的ID
		map = new google.maps.Map(document.getElementById("map"), {
			zoom: 7,
			center: {lat: 41.85, lng: -87.65},
		});

		directionsRenderer.setMap(map);
		marker = new google.maps.Marker({
			map,
		});
		const onChangeHandler = function () {
			calculateAndDisplayRoute(directionsService, directionsRenderer);
		};
		document.getElementById("start").addEventListener("change", onChangeHandler);
		document.getElementById("end").addEventListener("change", onChangeHandler);
		document.getElementById("serachBtn").addEventListener("click", geocode);
		document.getElementById("clear").addEventListener("click", clear);
	}

	//返回路线
	function calculateAndDisplayRoute(directionsService, directionsRenderer) {
		directionsService
				.route({
					origin: {
						query: document.getElementById("start").value,
					},
					destination: {
						query: document.getElementById("end").value,
					},
					travelMode: google.maps.TravelMode.DRIVING,
				})
				.then((response) => {
					directionsRenderer.setDirections(response);
				})
				.catch((e) => window.alert("Directions request failed due to " + status));
	}

	//检索位置
	function geocode() {
		const request = {
			address: document.getElementById('place').value || '昆明'
		}
		geocoder
				.geocode(request)
				.then((result) => {
					const {results} = result;
					map.setCenter(results[0].geometry.location);
					marker.setPosition(results[0].geometry.location);
					marker.setMap(map);
					console.log(JSON.stringify(result, null, 2), ' JSON.stringify(result, null, 2)')
					document.getElementById('content').innerText = JSON.stringify(result, null, 2)
				})
				.catch((e) => {
					alert("Geocode was not successful for the following reason: " + e);
				});
	}

	function clear() {
		marker.setMap(null);
		document.getElementById('place').value = ''
		document.getElementById('content').innerText = ''
		// 发送消息给包含的 Uni-app 页面
		window.parent.postMessage({data: 'Hello from embedded web page!'}, '*');
	}
</script>

<!-- 在页面加载完毕后调用初始化地图函数 -->
<script>
	// 发送消息给包含的 Uni-app 页面
	window.parent.postMessage({data: 'Hello from embedded web page!'}, '*');
	window.onload = function () {
		setTimeout(() => {
			initMap();
			alert('加载谷歌地图')
		}, 10000)
	};
</script>
</body>
</html>
